// noop
import SegmentedButtons from "@renderer/components/business/segmented-buttons";
import { Label } from "@renderer/components/ui/base/field";
import { Switch } from "@renderer/components/ui/base/switch";
import { useStreamOutputSettings } from "@renderer/queries/hooks/use-settings";
import { Rabbit, Timer, Zap } from "lucide-react";
import { useMemo } from "react";
import { useTranslation } from "react-i18next";

const { settingsService } = window.service;

export function StreamOutput() {
  const { t } = useTranslation("translation", {
    keyPrefix: "settings.preference-settings.stream-output",
  });

  const { streamSmootherEnabled, streamSpeed } = useStreamOutputSettings();

  const handleStreamToggle = async (enabled: boolean) => {
    await settingsService.setStreamSmootherEnabled(enabled);
  };

  const handleSpeedChange = async (speed: "slow" | "normal" | "fast") => {
    await settingsService.setStreamSpeed(speed);
  };

  const speedOptions = useMemo(
    () => [
      {
        key: "slow",
        icon: <Rabbit className="size-4" />,
        label: t("speed.slow"),
      },
      {
        key: "normal",
        icon: <Timer className="size-4" />,
        label: t("speed.normal"),
      },
      {
        key: "fast",
        icon: <Zap className="size-4" />,
        label: t("speed.fast"),
      },
    ],
    [t],
  );

  return (
    <div className="flex flex-col gap-4">
      {/* Stream Smoother Toggle */}
      <div className="flex flex-col gap-2">
        <Label className="text-label-fg">{t("smoother.label")}</Label>
        <Switch
          className="h-11 rounded-[10px] bg-setting px-3.5 py-2.5"
          isSelected={streamSmootherEnabled}
          onChange={handleStreamToggle}
        >
          <Label className="self-center">{t("smoother.switch.label")}</Label>
        </Switch>
      </div>

      {/* Stream Speed Selector */}
      {streamSmootherEnabled && (
        <div className="flex flex-col gap-2">
          <Label className="text-label-fg">{t("speed.label")}</Label>

          <SegmentedButtons
            options={speedOptions}
            selectedKey={streamSpeed}
            onSelect={(key) =>
              handleSpeedChange(key as "slow" | "normal" | "fast")
            }
          />
        </div>
      )}
    </div>
  );
}
